<template>
    <SysQueryFrom>
        <template v-slot:form_info>
            <El-form
                :model="formObj"
                class="form_content"
                ref="formRef"
                :inline="true"
            >
                <!--       :rules="userFromRules" -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="用户信息" prop="user_name">
                            <el-input
                                v-model="formObj.user_name"
                                placeholder="请输入用户名或密码"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户类型" prop="user_type_id">
                            <el-select
                                v-model="formObj.user_type_id"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in userTypeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="地方区域" prop="part">
                            <el-cascader
                                v-model="formObj.part"
                                clearable
                                :props="props"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户状态" prop="status">
                            <el-select
                                v-model="formObj.status"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in userStatusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </El-form>
            <slot name="form_other"></slot>
        </template>

        <template v-slot:form_btn>
            <SysQueryBtn @btnClick="btnClick"></SysQueryBtn>
        </template>
    </SysQueryFrom>
</template>

<script setup lang="ts">
import UserAPI from "@/api/system/user";
import { getLeaveOneToThreeOption } from "@/views/system/userManager/index";
import {
    userFromRules,
    userStatusOption,
} from "@/views/system/userManager/index";

const formRef = ref();
const emit = defineEmits(["fromQuery", "reset"]);
const formObj = reactive({
    user_name: "", // 用户名
    user_type_id: "", // 用户类型
    part: "", // 区域
    status: "", // 用户状态
    // 结构赋值来
    province: "", // 省
    city: "", //  市
    district: "", // 区
    town: "", // 镇
    village: "", // 村
});

const props = {
    lazy: true,
    checkStrictly: true,
    lazyLoad(node: any, resolve: any) {
        getLeaveOneToThreeOption(node).then((res) => {
            resolve(res); //获取村镇
        });
    },
};

//查询按钮点击
function btnClick(item: any) {
    if (item.event === "queryClick") {
        querTableList();
        return;
    }
    resetClick();
}

// 查询
function querTableList() {
    formRef.value.validate(async (isValid: boolean) => {
        emit("fromQuery", formObj);
    });
}

// 重置按钮点击
function resetClick() {
    formRef.value.resetFields();
    emit("reset");
}

const userTypeOption = ref(); // 用户类型
// 获取用户类型
async function getUserType() {
    await UserAPI.getUserType()
        .then((data: any) => {
            userTypeOption.value = data.map((item: any) => {
                return {
                    label: item.type_name,
                    value: item.id,
                };
            });
        })
        .catch((err: any) => {
            console.log(err);
        });
}

onBeforeMount(async () => {
    await getUserType();
    await querTableList();
});

defineExpose({ querTableList, formObj });
</script>

<style lang="scss" scoped>
.form_content {
    width: 80%;
    :deep(.el-form-item) {
        align-items: center;
        margin-bottom: 21px;
        .el-input,
        .el-select {
            height: 40px;
            width: 230px;
            .el-select__wrapper {
                height: 40px;
                line-height: 40px;
            }
        }
    }
}
</style>
